import React, { useState, CSSProperties } from 'react';
import { Classes, StyledPaginationWrapper } from '../styles'

export interface PaginationProps {
    /** 总数 */
    totalItems: number
     /** 初始页码 */
    initPageNum: number
    /** 每页条数 */
    itemsPerPage: number
    /** 翻页回调函数 */
    onPageChange: (num: number) => void
    /** 自定义样式 */
    style?: CSSProperties
  }
const Pagination = ({ totalItems, initPageNum, itemsPerPage, onPageChange, style }: PaginationProps) => {
  const [currentPage, setCurrentPage] = useState(initPageNum || 1);

  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const handlePageChange = (pageNumber: number) => {
    setCurrentPage(pageNumber);
    onPageChange(pageNumber);
  };

  const renderPageNumbers = () => {
    const pageNumbers = [];
    for (let i = 1; i <= totalPages; i++) {
      pageNumbers.push(
        <button
          key={i}
          onClick={() => handlePageChange(i)}
          className={currentPage === i? Classes.paginationActive : ''}
        >
          {i}
        </button>
      );
    }
    return pageNumbers;
  };

  return (
    <StyledPaginationWrapper className={Classes.pagination} style={style}>
      <span>共计{totalItems}条数据</span>
      <button
        disabled={currentPage === 1}
        onClick={() => handlePageChange(currentPage - 1)}
      >
        {/* 左尖括号 */}
        &lt;
      </button>
      {renderPageNumbers()}
      <button
        disabled={currentPage === totalPages}
        onClick={() => handlePageChange(currentPage + 1)}
      >
         {/* 右尖括号 */}
        &gt;
      </button>
    </StyledPaginationWrapper>
  );
};

export default Pagination;